<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
<title>source\jindo.DropArea.js - Jindo Component - AjaxUI@NHN</title>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify-min.css" media="screen">
<script type="text/javascript">
	var isMobile = (function() {
		var r = window.devicePixelRatio || 1;
		if (/windows phone/i.test(navigator.userAgent)) { r = 2; }
		
		var s = Math.max(screen.width / r, screen.height / r);
		
		var m = s < 1024;
		var href = m ? "api.mobile.css" : "api.css";
		document.write('<link rel="stylesheet" type="text/css" href="../assets/' + href + '" media="screen">');
		
		return m;
	})();
</script>

<script type="text/javascript" src="../assets/jindo.desktop.min.js"></script>
<script type="text/javascript" src="../assets/jindo_component.min.js"></script>
</head>
<body class="api-page">
<div id="wrap" class="api-main"><!-- 2Depth 접기 : lft_fold 추가 -->

	<div id="header">
		<h1><a href="../index.html"><span class="blind">JindoJS</span></a></h1>
		<div class="info">
			<span class="version">version 1.6.0</span>
			<span class="bar">|</span>
			<span class="help"><span class="ic_help"></span><a href="http://devcode.nhncorp.com/projects/jindo-component/issue" target="_blank">버그신고/문의</a></span>
		</div>
		<div class="menu">
			<button type="button" id="toggle_search_btn" class="btn_sch"><span class="blind">검색</span></button>
			<button type="button" id="toggle_list_btn" class="btn_snb btn_snb_on"><span class="blind">메뉴</span></button>
			<!-- [D] 클릭시 btn_sch_on,btn_snb_on 추가 -->
		</div>
	</div>

	<!-- sch_frm -->
	<div class="sch_frm hide_when_small">
		<h2 class="blind">검색</h2>
		<div class="filter">
			<input type="search" id="api-filter" placeholder="검색어를 입력하세요.">
		</div>
		<div id="search-tab" style="display:none;">
			<ul class="tabs">
			<li class="tc-tab">전체</li>
			<li class="tc-tab">키워드</li>
			<li class="tc-tab">클래스</li>
			<li class="tc-tab">메서드</li>
			<li class="tc-tab">프로퍼티</li>
			<li class="tc-tab">이벤트</li>
			</ul>
			<div class="panels">
				<ul id="api-all" class="tc-panel"></ul>
				<ul id="api-keywords" class="tc-panel"></ul>
				<ul id="api-classes" class="tc-panel"></ul>
				<ul id="api-methods" class="tc-panel"></ul>
				<ul id="api-attrs" class="tc-panel"></ul>
				<ul id="api-events" class="tc-panel"></ul>
			</div>

		</div>
	</div>
	<!-- // sch_frm -->

	<!-- container -->
	<div id="container">
		<!-- left-columns -->
		<div id="left-columns" class="sidemenu has_scrollbar">
			<h2 class="blind"><a href="../index.html"><span>APIs</span></a></h2>
<div class="snb depth1 scrollbar hide_when_small">
	<!-- [D] style="width:135px; height:384px; -->
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<div><ul>
			            <li class="">
			            	<a href="../classes/jindo.Accordion.html" class="">
			                	Accordion
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.AjaxHistory.html" class="">
			                	AjaxHistory
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.BrowseButton.html" class="">
			                	BrowseButton
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Cache.html" class="">
			                	Cache
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Calendar.html" class="">
			                	Calendar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Canvas.html" class="">
			                	Canvas
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CheckBox.html" class="">
			                	CheckBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CircularRolling.html" class="">
			                	CircularRolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Clipboard.html" class="">
			                	Clipboard
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Component.html" class="">
			                	Component
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DataBridge.html" class="">
			                	DataBridge
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DatePicker.html" class="">
			                	DatePicker
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DefaultTextValue.html" class="">
			                	DefaultTextValue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Dialog.html" class="">
			                	Dialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DragArea.html" class="">
			                	DragArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DropArea.html" class="">
			                	DropArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DynamicTree.html" class="">
			                	DynamicTree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Effect.html" class="">
			                	Effect
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FileUploader.html" class="">
			                	FileUploader
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FloatingLayer.html" class="">
			                	FloatingLayer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Foggy.html" class="">
			                	Foggy
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Formatter.html" class="">
			                	Formatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.HTMLComponent.html" class="">
			                	HTMLComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.InlineTextEdit.html" class="">
			                	InlineTextEdit
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerEffect.html" class="">
			                	LayerEffect
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerManager.html" class="">
			                	LayerManager
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerPosition.html" class="">
			                	LayerPosition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LazyLoading.html" class="">
			                	LazyLoading
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ModalDialog.html" class="">
			                	ModalDialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MouseGesture.html" class="">
			                	MouseGesture
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MultipleAjaxRequest.html" class="">
			                	MultipleAjaxRequest
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumberFormatter.html" class="">
			                	NumberFormatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumericStepper.html" class="">
			                	NumericStepper
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Pagination.html" class="">
			                	Pagination
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Rolling.html" class="">
			                	Rolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RollingChart.html" class="">
			                	RollingChart
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverArea.html" class="">
			                	RolloverArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverClick.html" class="">
			                	RolloverClick
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBar.html" class="">
			                	ScrollBar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBox.html" class="">
			                	ScrollBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectArea.html" class="">
			                	SelectArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectBox.html" class="">
			                	SelectBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Slider.html" class="">
			                	Slider
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.StarRating.html" class="">
			                	StarRating
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TabControl.html" class="">
			                	TabControl
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TextRange.html" class="">
			                	TextRange
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Timer.html" class="">
			                	Timer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Transition.html" class="">
			                	Transition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Tree.html" class="">
			                	Tree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UIComponent.html" class="">
			                	UIComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UploadQueue.html" class="">
			                	UploadQueue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.WatchInput.html" class="">
			                	WatchInput
								
								

							    
						        
			            	</a>
			            </li>
			        </ul></div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>


<button type="button" title="펼치기" class="btn_open">바로가기 열기<span class="ic"></span></button>
<button type="button" title="접기" class="btn_close">바로가기 닫기<span class="ic"></span></button>

		</div>
		<!-- // left-columns -->

		<!-- main content -->
		<div id="main">
			<div class="main_fix">
				<div class="content">
	
	<h1 class="blind">source/jindo.DropArea.js</h1>
	<div class="tc-panel first">
		<dl class="relation">
			<dt>파일명</dt>
			<dd>jindo.DropArea.js</dd>
			<dt>경로</dt>
			<dd>source/</dd>
		</dl>
		<div id="file" class="file">
		    <pre class="code prettyprint linenums">/**
	@fileOverview&nbsp;HTMLElement를&nbsp;Drop할&nbsp;수&nbsp;있게&nbsp;해주는&nbsp;컴포넌트
	@author&nbsp;hooriza,&nbsp;modified&nbsp;by&nbsp;senxation
	@version&nbsp;#__VERSION__#
**/

/**
	HTMLElement를&nbsp;Drop할&nbsp;수&nbsp;있게&nbsp;해주는&nbsp;컴포넌트
	DragArea&nbsp;컴포넌트는&nbsp;상위&nbsp;기준&nbsp;엘리먼트의&nbsp;자식들&nbsp;중&nbsp;특정&nbsp;클래스명을&nbsp;가진&nbsp;모든&nbsp;엘리먼트에&nbsp;Drag된&nbsp;엘리먼트를&nbsp;Drop&nbsp;가능하게&nbsp;한다.
	
	@class&nbsp;jindo.DropArea
	@extends&nbsp;jindo.Component
	@uses&nbsp;jindo.DragArea
	
	@keyword&nbsp;drop,&nbsp;area,&nbsp;드래그&amp;드랍,&nbsp;드랍,&nbsp;영역
**/
jindo.DropArea&nbsp;=&nbsp;jindo.$Class({
	/**&nbsp;@lends&nbsp;jindo.DropArea.prototype&nbsp;*/
	
	/**
		DropArea&nbsp;컴포넌트를&nbsp;생성한다.
		@constructor
		@param&nbsp;{HTMLElement&nbsp;||&nbsp;document}&nbsp;el&nbsp;Drop될&nbsp;엘리먼트들의&nbsp;상위&nbsp;기준&nbsp;엘리먼트.&nbsp;컴포넌트가&nbsp;적용되는&nbsp;영역(Area)이&nbsp;된다.
		@param&nbsp;{Object}&nbsp;[htOption]&nbsp;옵션&nbsp;객체
			@param&nbsp;{jindo.DragArea}&nbsp;htOption.oDragInstance&nbsp;Drop이&nbsp;될&nbsp;대상인&nbsp;DragArea&nbsp;컴포넌트의&nbsp;인스턴스&nbsp;(필수지정)
			@param&nbsp;{String}&nbsp;[htOption.sClassName=&quot;droppable&quot;]&nbsp;드랍가능한&nbsp;엘리먼트의&nbsp;클래스명.&nbsp;상위&nbsp;기준&nbsp;엘리먼트의&nbsp;자식&nbsp;중&nbsp;해당&nbsp;클래스명을&nbsp;가진&nbsp;모든&nbsp;엘리먼트는&nbsp;드랍가능하게&nbsp;된다.
		@example
			var&nbsp;oDropArea&nbsp;=&nbsp;new&nbsp;jindo.DropArea(document,&nbsp;{&nbsp;
				sClassName&nbsp;:&nbsp;&#39;dropable&#39;,&nbsp;//&nbsp;(String)&nbsp;상위&nbsp;기준&nbsp;엘리먼트의&nbsp;자식&nbsp;중&nbsp;해당&nbsp;클래스명을&nbsp;가진&nbsp;모든&nbsp;엘리먼트는&nbsp;Drop&nbsp;가능하게&nbsp;된다.&nbsp;
				oDragInstance&nbsp;:&nbsp;oDragArea&nbsp;//&nbsp;(jindo.DragArea)&nbsp;Drop이&nbsp;될&nbsp;대상인&nbsp;DragArea&nbsp;컴포넌트의&nbsp;인스턴스
			}).attach({
				dragStart&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//oDragInstance의&nbsp;dragStart&nbsp;이벤트에&nbsp;연이어&nbsp;발생
					//전달되는&nbsp;이벤트&nbsp;객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	elArea&nbsp;:&nbsp;(HTMLElement)&nbsp;기준&nbsp;엘리먼트
					//	elHandle&nbsp;:&nbsp;(HTMLElement)&nbsp;옵션의&nbsp;className으로&nbsp;설정된&nbsp;드래그&nbsp;될&nbsp;핸들&nbsp;엘리먼트&nbsp;(mousedown된&nbsp;엘리먼트)
					//	elDrag&nbsp;:&nbsp;(HTMLElement)&nbsp;실제로&nbsp;드래그&nbsp;될&nbsp;엘리먼트&nbsp;(핸들을&nbsp;드래그하여&nbsp;레이어&nbsp;전체를&nbsp;드래그되도록&nbsp;하고&nbsp;싶으면&nbsp;이&nbsp;값을&nbsp;설정한다.&nbsp;아래&nbsp;예제코드&nbsp;참고)
					//	htDiff&nbsp;:&nbsp;(HashTable)&nbsp;handledown된&nbsp;좌표와&nbsp;dragstart된&nbsp;좌표의&nbsp;차이&nbsp;htDiff.nPageX,&nbsp;htDiff.nPageY
					//	weEvent&nbsp;:&nbsp;(jindo.$Event)&nbsp;마우스&nbsp;이동&nbsp;중&nbsp;발생되는&nbsp;jindo.$Event&nbsp;객체
					//};
				},
				over&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//Drag된&nbsp;채&nbsp;Drop&nbsp;가능한&nbsp;엘리먼트에&nbsp;마우스&nbsp;커서가&nbsp;올라갈&nbsp;경우&nbsp;발생
					//전달되는&nbsp;이벤트&nbsp;객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	elHandle&nbsp;:&nbsp;(HTMLElement)&nbsp;Drag하기위한&nbsp;이벤트를&nbsp;받은&nbsp;핸들&nbsp;엘리먼트
					//	elDrag&nbsp;:&nbsp;(HTMLElement)&nbsp;실제&nbsp;Drag&nbsp;된&nbsp;엘리먼트&nbsp;
					//	elDrop&nbsp;:&nbsp;(HTMLElement)&nbsp;Drop&nbsp;될&nbsp;대상&nbsp;엘리먼트
					//}
				},
				move&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//Drag된&nbsp;채&nbsp;Drop&nbsp;가능한&nbsp;엘리먼트위에서&nbsp;마우스&nbsp;커서가&nbsp;움직일&nbsp;경우&nbsp;발생
					//전달되는&nbsp;이벤트&nbsp;객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	weEvent&nbsp;:&nbsp;(jindo.$Event)&nbsp;마우스&nbsp;이동시&nbsp;발생하는&nbsp;jindo의&nbsp;jindo.$Event&nbsp;객체
					//	elHandle&nbsp;:&nbsp;(HTMLElement)&nbsp;Drag하기위한&nbsp;이벤트를&nbsp;받은&nbsp;핸들&nbsp;엘리먼트
					//	elDrag&nbsp;:&nbsp;(HTMLElement)&nbsp;실제&nbsp;Drag&nbsp;된&nbsp;엘리먼트&nbsp;
					//	elDrop&nbsp;:&nbsp;(HTMLElement)&nbsp;Drop&nbsp;될&nbsp;대상&nbsp;엘리먼트
					//	nRatioX&nbsp;:&nbsp;(Number)&nbsp;드랍될&nbsp;엘리먼트&nbsp;내부의&nbsp;좌우비율
					//	nRatioY&nbsp;:&nbsp;(Number)&nbsp;드랍될&nbsp;엘리먼트&nbsp;내부의&nbsp;상하비율
					//}
				},
				out&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//Drag된&nbsp;채&nbsp;Drop&nbsp;가능한&nbsp;엘리먼트에서&nbsp;마우스&nbsp;커서가&nbsp;벗어날&nbsp;경우&nbsp;발생
					//전달되는&nbsp;이벤트&nbsp;객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	elHandle&nbsp;:&nbsp;(HTMLElement)&nbsp;Drag하기위한&nbsp;이벤트를&nbsp;받은&nbsp;핸들&nbsp;엘리먼트
					//	elDrag&nbsp;:&nbsp;(HTMLElement)&nbsp;실제&nbsp;Drag&nbsp;된&nbsp;엘리먼트&nbsp;
					//	elDrop&nbsp;:&nbsp;(HTMLElement)&nbsp;Drop&nbsp;될&nbsp;엘리먼트
					//}
				},&nbsp;
				drop&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//Drop&nbsp;가능한&nbsp;엘리먼트에&nbsp;성공적으로&nbsp;드랍&nbsp;될&nbsp;경우&nbsp;발생
					//전달되는&nbsp;이벤트&nbsp;객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	elHandle&nbsp;:&nbsp;(HTMLElement)&nbsp;Drag하기위한&nbsp;이벤트를&nbsp;받은&nbsp;핸들&nbsp;엘리먼트
					//	elDrag&nbsp;:&nbsp;(HTMLElement)&nbsp;실제&nbsp;Drag&nbsp;된&nbsp;엘리먼트&nbsp;
					//	elDrop&nbsp;:&nbsp;(HTMLElement)&nbsp;Drop&nbsp;될&nbsp;대상&nbsp;엘리먼트
					//	weEvent&nbsp;:&nbsp;(jindo.$Event)&nbsp;mouseup시&nbsp;발생되는&nbsp;jindo.$Event&nbsp;객체&nbsp;
					//}
				},
				dragEnd&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//oDragInstance의&nbsp;dragEnd&nbsp;이벤트에&nbsp;연이어&nbsp;발생
					//전달되는&nbsp;이벤트&nbsp;객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	elArea&nbsp;:&nbsp;(HTMLElement)&nbsp;기준&nbsp;엘리먼트
					//	elHandle&nbsp;:&nbsp;(HTMLElement)&nbsp;옵션의&nbsp;className으로&nbsp;설정된&nbsp;드래그&nbsp;될&nbsp;핸들&nbsp;엘리먼트&nbsp;(mousedown된&nbsp;엘리먼트)
					//	elDrag&nbsp;:&nbsp;(HTMLElement)&nbsp;실제로&nbsp;드래그&nbsp;된&nbsp;엘리먼트
					//&nbsp;&nbsp;aDrop&nbsp;:&nbsp;(Array)&nbsp;Drop&nbsp;될&nbsp;대상&nbsp;엘리먼트의&nbsp;배열
					//	nX&nbsp;:&nbsp;(Number)&nbsp;드래그&nbsp;된&nbsp;x좌표.
					//	nY&nbsp;:&nbsp;(Number)&nbsp;드래그&nbsp;된&nbsp;y좌표.
					//}
				}
			});
	**/
	$init&nbsp;:&nbsp;function(el,&nbsp;htOption)&nbsp;{
		this._el&nbsp;=&nbsp;jindo.$(el);
		this._wel&nbsp;=&nbsp;jindo.$Element(this._el);
		
		this.option({&nbsp;
			sClassName&nbsp;:&nbsp;&#39;droppable&#39;,&nbsp;
			oDragInstance&nbsp;:&nbsp;null&nbsp;
		});
		this.option(htOption&nbsp;||&nbsp;{});
		
		this._waOveredDroppableElement&nbsp;=&nbsp;jindo.$A([]);
		
		this._elHandle&nbsp;=&nbsp;null;
		this._elDragging&nbsp;=&nbsp;null;
				
		this._wfMouseMove&nbsp;=&nbsp;jindo.$Fn(this._onMouseMove,&nbsp;this);
		this._wfMouseOver&nbsp;=&nbsp;jindo.$Fn(this._onMouseOver,&nbsp;this);
		this._wfMouseOut&nbsp;=&nbsp;jindo.$Fn(this._onMouseOut,&nbsp;this);
		var&nbsp;oDrag&nbsp;=&nbsp;this.option(&#39;oDragInstance&#39;);
		if&nbsp;(oDrag)&nbsp;{
			var&nbsp;self&nbsp;=&nbsp;this;
			oDrag.attach({
				handleDown&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					self._elHandle&nbsp;=&nbsp;oCustomEvent.elHandle;
					self._waOveredDroppableElement.empty();&nbsp;
				},
				dragStart&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					self._reCalculate();
					/**
						oDragInstance의&nbsp;dragStart&nbsp;이벤트에&nbsp;연이어&nbsp;발생
						
						@event&nbsp;dragStart
						@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
						@param&nbsp;{HTMLElement}&nbsp;elArea&nbsp;기준&nbsp;엘리먼트
						@param&nbsp;{HTMLElement}&nbsp;elHandle&nbsp;옵션의&nbsp;className으로&nbsp;설정된&nbsp;드래그&nbsp;될&nbsp;핸들&nbsp;엘리먼트
						@param&nbsp;{HTMLElement}&nbsp;elDrag&nbsp;실제로&nbsp;드래그&nbsp;될&nbsp;엘리먼트
						@param&nbsp;{Object}&nbsp;htDiff&nbsp;handledown된&nbsp;좌표와&nbsp;dragstart된&nbsp;좌표의&nbsp;차이
							@param&nbsp;{Number}&nbsp;htDiff.nPageX&nbsp;가로&nbsp;좌표
							@param&nbsp;{Number}&nbsp;htDiff.nPageY&nbsp;세로&nbsp;좌표
						@param&nbsp;{jindo.$Event}&nbsp;weEvent&nbsp;mousedown시&nbsp;발생되는&nbsp;jindo.$Event&nbsp;객체
						@example
							//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
							oDropArea.attach(&quot;dragStart&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
					**/
					self.fireEvent(oCustomEvent.sType,&nbsp;oCustomEvent);&nbsp;//dragStart
					
					self._wfMouseMove.attach(document,&nbsp;&#39;mousemove&#39;);&nbsp;//move
					//self._wfMouseOver.attach(self._el,&nbsp;&#39;mouseover&#39;);&nbsp;//over
					//self._wfMouseOut.attach(self._el,&nbsp;&#39;mouseout&#39;);&nbsp;&nbsp;//out
				},
				drag&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					self._elDragging&nbsp;=&nbsp;oCustomEvent.elDrag;&nbsp;
				},
				dragEnd&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					var&nbsp;o&nbsp;=&nbsp;{};
					for&nbsp;(var&nbsp;sKey&nbsp;in&nbsp;oCustomEvent)&nbsp;{
						o[sKey]&nbsp;=&nbsp;oCustomEvent[sKey];
					}
					o.aDrop&nbsp;=&nbsp;self.getOveredLists().concat();
					
					self._clearOveredDroppableElement(oCustomEvent.weEvent,&nbsp;oCustomEvent.bInterupted);&nbsp;//drop
					/**
						oDragInstance의&nbsp;dragEnd&nbsp;이벤트에&nbsp;연이어&nbsp;발생
						
						@event&nbsp;dragEnd
						@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
						@param&nbsp;{HTMLElement}&nbsp;elArea&nbsp;기준&nbsp;엘리먼트
						@param&nbsp;{HTMLElement}&nbsp;elHandle&nbsp;옵션의&nbsp;className으로&nbsp;설정된&nbsp;드래그&nbsp;될&nbsp;핸들&nbsp;엘리먼트
						@param&nbsp;{HTMLElement}&nbsp;elDrag&nbsp;실제로&nbsp;드래그&nbsp;된&nbsp;엘리먼트커스텀&nbsp;
						@param&nbsp;{Array}&nbsp;aDrop&nbsp;Drop&nbsp;될&nbsp;대상&nbsp;엘리먼트의&nbsp;배열
						@param&nbsp;{Number}&nbsp;nX&nbsp;드래그&nbsp;된&nbsp;x좌표
						@param&nbsp;{Number}&nbsp;nY&nbsp;드래그&nbsp;된&nbsp;y좌표
						@example
							//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
							oDropArea.attach(&quot;dragEnd&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
					**/
					self.fireEvent(oCustomEvent.sType,&nbsp;o);&nbsp;//dragEnd
					
					self._wfMouseMove.detach(document,&nbsp;&#39;mousemove&#39;);
					//self._wfMouseOver.detach(self._el,&nbsp;&#39;mouseover&#39;);
					//self._wfMouseOut.detach(self._el,&nbsp;&#39;mouseout&#39;);&nbsp;
				},
				handleUp&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					self._elDragging&nbsp;=&nbsp;null;
					self._elHandle&nbsp;=&nbsp;null;
				}
			});
		}&nbsp;
	},
	
	_addOveredDroppableElement&nbsp;:&nbsp;function(elDroppable)&nbsp;{
		if&nbsp;(this._waOveredDroppableElement.indexOf(elDroppable)&nbsp;==&nbsp;-1)&nbsp;{
			this._waOveredDroppableElement.push(elDroppable);
			/**
				Drag된&nbsp;채&nbsp;Drop&nbsp;가능한&nbsp;엘리먼트에&nbsp;마우스&nbsp;커서가&nbsp;올라갈&nbsp;경우&nbsp;발생
				
				@event&nbsp;over
				@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
				@param&nbsp;{HTMLElement}&nbsp;elHandle&nbsp;옵션의&nbsp;className으로&nbsp;설정된&nbsp;드래그&nbsp;될&nbsp;핸들&nbsp;엘리먼트
				@param&nbsp;{HTMLElement}&nbsp;elDrag&nbsp;실제로&nbsp;드래그&nbsp;될&nbsp;엘리먼트
				@param&nbsp;{HTMLElement}&nbsp;elDrop&nbsp;Drop&nbsp;될&nbsp;대상&nbsp;엘리먼트
				@example
					//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
					oDropArea.attach(&quot;over&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
			**/
			this.fireEvent(&#39;over&#39;,&nbsp;{&nbsp;
				elHandle&nbsp;:&nbsp;this._elHandle,
				elDrag&nbsp;:&nbsp;this._elDragging,&nbsp;
				elDrop&nbsp;:&nbsp;elDroppable&nbsp;&nbsp;
			});
		}
	},
	
	_fireMoveEvent&nbsp;:&nbsp;function(elDroppable,&nbsp;oRect,&nbsp;oPos,&nbsp;we)&nbsp;{
		var&nbsp;nRatioX&nbsp;=&nbsp;(oPos.pageX&nbsp;-&nbsp;oRect.nLeft)&nbsp;/&nbsp;(oRect.nRight&nbsp;-&nbsp;oRect.nLeft);
		var&nbsp;nRatioY&nbsp;=&nbsp;(oPos.pageY&nbsp;-&nbsp;oRect.nTop)&nbsp;/&nbsp;(oRect.nBottom&nbsp;-&nbsp;oRect.nTop);
		/**
			Drag된&nbsp;채&nbsp;Drop&nbsp;가능한&nbsp;엘리먼트위에서&nbsp;마우스&nbsp;커서가&nbsp;움직일&nbsp;경우&nbsp;발생
			
			@event&nbsp;move
			@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
			@param&nbsp;{HTMLElement}&nbsp;elHandle&nbsp;옵션의&nbsp;className으로&nbsp;설정된&nbsp;드래그&nbsp;될&nbsp;핸들&nbsp;엘리먼트
			@param&nbsp;{HTMLElement}&nbsp;elDrag&nbsp;실제로&nbsp;드래그&nbsp;될&nbsp;엘리먼트
			@param&nbsp;{HTMLElement}&nbsp;elDrop&nbsp;Drop&nbsp;될&nbsp;대상&nbsp;엘리먼트
			@param&nbsp;{Number}&nbsp;nRatioX&nbsp;드랍될&nbsp;엘리먼트&nbsp;내부의&nbsp;좌우비율
			@param&nbsp;{Number}&nbsp;nRatioY&nbsp;드랍될&nbsp;엘리먼트&nbsp;내부의&nbsp;상하비율
			@param&nbsp;{jindo.$Event}&nbsp;weEvent&nbsp;mousedown시&nbsp;발생되는&nbsp;jindo.$Event&nbsp;객체
			@example
				//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
				oDropArea.attach(&quot;move&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
		**/
		this.fireEvent(&#39;move&#39;,&nbsp;{
			weEvent&nbsp;:&nbsp;we,
			elHandle&nbsp;:&nbsp;this._elHandle,
			elDrag&nbsp;:&nbsp;this._elDragging,&nbsp;
			elDrop&nbsp;:&nbsp;elDroppable,&nbsp;
			nRatioX&nbsp;:&nbsp;nRatioX,
			nRatioY&nbsp;:&nbsp;nRatioY
		});
	},

	_removeOveredDroppableElement&nbsp;:&nbsp;function(elDroppable)&nbsp;{
		var&nbsp;nIndex&nbsp;=&nbsp;this._waOveredDroppableElement.indexOf(elDroppable);
		if&nbsp;(nIndex&nbsp;!=&nbsp;-1)&nbsp;{
			this._waOveredDroppableElement.splice(nIndex,&nbsp;1);
			/**
				Drag된&nbsp;채&nbsp;Drop&nbsp;가능한&nbsp;엘리먼트에서&nbsp;마우스&nbsp;커서가&nbsp;벗어날&nbsp;경우&nbsp;발생
				
				@event&nbsp;out
				@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
				@param&nbsp;{HTMLElement}&nbsp;elHandle&nbsp;옵션의&nbsp;className으로&nbsp;설정된&nbsp;드래그&nbsp;될&nbsp;핸들&nbsp;엘리먼트
				@param&nbsp;{HTMLElement}&nbsp;elDrag&nbsp;실제로&nbsp;드래그&nbsp;될&nbsp;엘리먼트
				@param&nbsp;{HTMLElement}&nbsp;elDrop&nbsp;Drop&nbsp;될&nbsp;대상&nbsp;엘리먼트
				@param&nbsp;{jindo.$Event}&nbsp;weEvent&nbsp;mousedown시&nbsp;발생되는&nbsp;jindo.$Event&nbsp;객체
				@example
					//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
					oDropArea.attach(&quot;out&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
			**/
			this.fireEvent(&#39;out&#39;,&nbsp;{&nbsp;
				elHandle&nbsp;:&nbsp;this._elHandle,
				elDrag&nbsp;:&nbsp;this._elDragging,&nbsp;
				elDrop&nbsp;:&nbsp;elDroppable&nbsp;&nbsp;
			});
		}
	},

	_clearOveredDroppableElement&nbsp;:&nbsp;function(weEvent,&nbsp;bInterupted)&nbsp;{
		if&nbsp;(bInterupted)&nbsp;{
			this._waOveredDroppableElement.empty();
			return;
		}
		for&nbsp;(var&nbsp;elDroppable;&nbsp;(elDroppable&nbsp;=&nbsp;this._waOveredDroppableElement.$value()[0]);&nbsp;)&nbsp;{
			this._waOveredDroppableElement.splice(0,&nbsp;1);
			/**
				Drop&nbsp;가능한&nbsp;엘리먼트에&nbsp;성공적으로&nbsp;드랍&nbsp;될&nbsp;경우&nbsp;발생
				
				@event&nbsp;drop
				@param&nbsp;{String}&nbsp;sType&nbsp;&nbsp;커스텀&nbsp;이벤트명
				@param&nbsp;{HTMLElement}&nbsp;elHandle&nbsp;옵션의&nbsp;className으로&nbsp;설정된&nbsp;드래그&nbsp;될&nbsp;핸들&nbsp;엘리먼트
				@param&nbsp;{HTMLElement}&nbsp;elDrag&nbsp;실제로&nbsp;드래그&nbsp;될&nbsp;엘리먼트
				@param&nbsp;{HTMLElement}&nbsp;elDrop&nbsp;Drop&nbsp;될&nbsp;대상&nbsp;엘리먼트
				@example
					//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
					oDropArea.attach(&quot;drop&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
			**/
			this.fireEvent(&#39;drop&#39;,&nbsp;{
				weEvent&nbsp;:&nbsp;weEvent,
				elHandle&nbsp;:&nbsp;this._elHandle,
				elDrag&nbsp;:&nbsp;this._elDragging,&nbsp;
				elDrop&nbsp;:&nbsp;elDroppable&nbsp;
			});
		}
	},
	
	/**
		Drag되고&nbsp;있는&nbsp;채,&nbsp;마우스가&nbsp;올라간&nbsp;엘리먼트의&nbsp;리스트를&nbsp;구함
		
		@method&nbsp;getOveredLists
		@return&nbsp;{Array}&nbsp;겹쳐진&nbsp;엘리먼트&nbsp;
	**/
	getOveredLists&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._waOveredDroppableElement&nbsp;?&nbsp;this._waOveredDroppableElement.$value()&nbsp;:&nbsp;[];
	},
	
	_isChildOfDropArea&nbsp;:&nbsp;function(el)&nbsp;{
		if&nbsp;(this._el&nbsp;===&nbsp;document&nbsp;||&nbsp;this._el&nbsp;===&nbsp;el){
			return&nbsp;true;
		}&nbsp;
		return&nbsp;this._wel.isParentOf(el);
	},
	
	_findDroppableElement&nbsp;:&nbsp;function(el)&nbsp;{
		if(!el)&nbsp;return&nbsp;null;
		var&nbsp;sClass&nbsp;=&nbsp;&#39;.&#39;&nbsp;+&nbsp;this.option(&#39;sClassName&#39;);		
		var&nbsp;elDroppable&nbsp;=&nbsp;jindo.$$.test(el,&nbsp;sClass)&nbsp;?&nbsp;el&nbsp;:&nbsp;jindo.$$.getSingle(&#39;!&nbsp;&#39;&nbsp;+&nbsp;sClass,&nbsp;el);
		if&nbsp;(!this._isChildOfDropArea(el))&nbsp;{&nbsp;//기준&nbsp;엘리먼트가&nbsp;document인&nbsp;경우&nbsp;Magnetic일때&nbsp;문서밖으로&nbsp;커서이동시&nbsp;event&nbsp;발생!
			elDroppable&nbsp;=&nbsp;null;
		}
		return&nbsp;elDroppable;
	},
	
	_isDragging&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;oDrag&nbsp;=&nbsp;this.option(&#39;oDragInstance&#39;);
		return&nbsp;(oDrag&nbsp;&amp;&amp;&nbsp;oDrag.isDragging());
	},
	
	_onMouseMove&nbsp;:&nbsp;function(we)&nbsp;{		
		if&nbsp;(this._isDragging())&nbsp;{
			
			var&nbsp;oPos&nbsp;=&nbsp;we.pos();

			if&nbsp;(we.element&nbsp;==&nbsp;this._elDragging&nbsp;||&nbsp;jindo.$Element(this._elDragging).isParentOf(we.element))&nbsp;{&nbsp;//Magnetic
				var&nbsp;aItem&nbsp;=&nbsp;this._aItem;
				var&nbsp;aItemRect&nbsp;=&nbsp;this._aItemRect;
				
				for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0,&nbsp;htRect,&nbsp;el;&nbsp;((htRect&nbsp;=&nbsp;aItemRect[i])&nbsp;&amp;&amp;&nbsp;(el&nbsp;=&nbsp;aItem[i]));&nbsp;i++)&nbsp;{
					if&nbsp;(&nbsp;htRect.nLeft&nbsp;&lt;=&nbsp;oPos.pageX&nbsp;&amp;&amp;&nbsp;oPos.pageX&nbsp;&lt;=&nbsp;htRect.nRight&nbsp;&amp;&amp;&nbsp;htRect.nTop&nbsp;&lt;=&nbsp;oPos.pageY&nbsp;&amp;&amp;&nbsp;oPos.pageY&nbsp;&lt;=&nbsp;htRect.nBottom&nbsp;)&nbsp;{
						this._addOveredDroppableElement(el);
						this._fireMoveEvent(el,&nbsp;htRect,&nbsp;oPos,&nbsp;we);
					}&nbsp;else&nbsp;{
						this._removeOveredDroppableElement(el);
					}
				}
			}&nbsp;else&nbsp;{&nbsp;//Pointing

				var&nbsp;elDroppable&nbsp;=&nbsp;this._findDroppableElement(we.element);
				if(this.elPrevMove&nbsp;&amp;&amp;&nbsp;this.elPrevMove&nbsp;!=&nbsp;elDroppable){
					this._removeOveredDroppableElement(this.elPrevMove);
					this.elPrevMove&nbsp;=&nbsp;null;
				}
				
				//&nbsp;IE9에서&nbsp;mousemove&nbsp;event의&nbsp;element가&nbsp;dragarea를&nbsp;반환하기&nbsp;때문에&nbsp;droppable을&nbsp;정상적으로&nbsp;찾지&nbsp;못함.&nbsp;이&nbsp;경우는&nbsp;mouse&nbsp;pointer&nbsp;위치의&nbsp;element를&nbsp;이용하여&nbsp;droppable&nbsp;탐색
				if(&nbsp;elDroppable==we.element&nbsp;||&nbsp;(!elDroppable&nbsp;&amp;&amp;&nbsp;document.elementFromPoint)){
					elDroppable&nbsp;=&nbsp;this._findDroppableElement(document.elementFromPoint(oPos.pageX,&nbsp;oPos.pageY));
				}
				if&nbsp;(!elDroppable)&nbsp;{
					return;
				}
				
				this.elPrevMove&nbsp;=&nbsp;elDroppable;
			
				this._addOveredDroppableElement(elDroppable);
			
				var&nbsp;htOffset&nbsp;=&nbsp;jindo.$Element(elDroppable).offset();
				var&nbsp;htArea&nbsp;=&nbsp;{
					&quot;nLeft&quot;&nbsp;:&nbsp;htOffset.left,
					&quot;nTop&quot;&nbsp;:&nbsp;htOffset.top,
					&quot;nRight&quot;&nbsp;:&nbsp;htOffset.left&nbsp;+&nbsp;elDroppable.offsetWidth,
					&quot;nBottom&quot;&nbsp;:&nbsp;htOffset.top&nbsp;+&nbsp;elDroppable.offsetHeight
				};
		
				if&nbsp;(&nbsp;htArea.nLeft&nbsp;&lt;=&nbsp;oPos.pageX&nbsp;&amp;&amp;&nbsp;oPos.pageX&nbsp;&lt;=&nbsp;htArea.nRight&nbsp;&amp;&amp;&nbsp;htArea.nTop&nbsp;&lt;=&nbsp;oPos.pageY&nbsp;&amp;&amp;&nbsp;oPos.pageY&nbsp;&lt;=&nbsp;htArea.nBottom&nbsp;)&nbsp;{
					this._fireMoveEvent(elDroppable,&nbsp;htArea,&nbsp;oPos,&nbsp;we);
				}
			}
			
		}
	},
	
	_onMouseOver&nbsp;:&nbsp;function(we)&nbsp;{
		if&nbsp;(this._isDragging())&nbsp;{
			var&nbsp;elDroppable&nbsp;=&nbsp;this._findDroppableElement(we.element);
			if&nbsp;(elDroppable)&nbsp;{
				this._addOveredDroppableElement(elDroppable);
			}
		}
	},
	
	_onMouseOut&nbsp;:&nbsp;function(we)&nbsp;{
		if&nbsp;(this._isDragging())&nbsp;{
			var&nbsp;elDroppable&nbsp;=&nbsp;this._findDroppableElement(we.element);
			if&nbsp;(elDroppable&nbsp;&amp;&amp;&nbsp;we.relatedElement&nbsp;&amp;&amp;&nbsp;!jindo.$Element(we.relatedElement).isChildOf(we.element))&nbsp;{
				this._removeOveredDroppableElement(elDroppable);
			}
		}
	},
	
	_getRectInfo&nbsp;:&nbsp;function(el)&nbsp;{
		var&nbsp;htOffset&nbsp;=&nbsp;jindo.$Element(el).offset();	
		return&nbsp;{
			nLeft&nbsp;:&nbsp;htOffset.left,
			nTop&nbsp;:&nbsp;htOffset.top,
			nRight&nbsp;:&nbsp;htOffset.left&nbsp;+&nbsp;el.offsetWidth,
			nBottom&nbsp;:&nbsp;htOffset.top&nbsp;+&nbsp;el.offsetHeight
		};
	},
	
	_reCalculate&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;aItem&nbsp;=&nbsp;jindo.$$(&#39;.&#39;&nbsp;+&nbsp;this.option(&#39;sClassName&#39;),&nbsp;this._el);
			
		if&nbsp;(this._el.tagName&nbsp;&amp;&amp;&nbsp;jindo.$$.test(this._el,&nbsp;&#39;.&#39;&nbsp;+&nbsp;this.option(&#39;sClassName&#39;)))&nbsp;{
			aItem.push(this._el);
		}
		
		this._aItem&nbsp;=&nbsp;aItem;
		this._aItemRect&nbsp;=&nbsp;[];
		
		for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0,&nbsp;el;&nbsp;(el&nbsp;=&nbsp;aItem[i]);&nbsp;i++)&nbsp;{
			this._aItemRect.push(this._getRectInfo(el));
		}
	}
}).extend(jindo.Component);
</pre>
		</div>
	</div>
</div>

			</div>
		</div>
		<!-- // main content -->

	</div>
	<!-- // container -->

	<!-- footer -->
	<div id="footer">
		<p>Copyright ©<a href="http://nhncorp.com/" target="_blank">NHN Corp.</a> Platform Ajax Team. All Rights Reserved.</p>
	</div>
	<!-- // footer -->

</div>
<!-- // wrap -->

<style type="text/css">

	.item {
		transition:background .2s linear;
		-webkit-transition:background .2s linear;
		-moz-transition:background .2s linear;
		-o-transition:background .2s linear;
		-ms-transition:background .2s linear;
	}
	
	.highlight {
		background-color:#ffffd8 !important;
	}
	
	li.selected a.highlight {
		background-color:#aa8 !important;
	}
	
	.hide-deprecated .deprecated-item, .hide-inherited .inherited-item, .private {
		display:none;
	}
	
	.scrollbar-v, .scrollbar-h { display:none; }
	.scrollbar-show { display:block; }
	
	.api-page .tbl_fold .more_history { display:none; }
	
	/* FILE */
	.file pre.code {
		border:1px solid #ccc;
		padding:0;
	}
	
	.file ol {
		padding-left: 4em;
		background-color: #f9f9f9;
	}

	.file ol li {
		list-style: decimal;
		border-left:1px solid #ccc;
		padding:2px 4px;
	}
	
	.file li.L1, .file li.L3, .file li.L5, .file li.L7, .file li.L9 {
		background-color: #f9f9f9;	
	}

	.file li.L0, .file li.L2, .file li.L4, .file li.L6, .file li.L8 { 
		background-color: #f0f0f0;
	}
	
</style>
<script type="text/javascript" src="../assets/prettify/prettify-min.js"></script>
<script type="text/javascript" src="../assets/hash.js"></script>
<script type="text/javascript" src="../assets/api-list.js"></script>
<script type="text/javascript" src="../assets/api-search.js"></script>
<script type="text/javascript" src="../assets/../api.js?callback=APISearch.setData"></script>
<script type="text/javascript">
	var projectRoot = "../";
	var projectAssets = "../assets";
	
    apiDocs(projectAssets);	
</script>
</body>
</html>